<template>
  <div class="user-auth">
    <a-card :body-style="{ padding: '32px' }" :bordered="false">
      <div class="auth-title">
        <div class="title">认证会员申请 - 1.材料准备及会员会缴纳</div>
        <div class="desc">
          请提前准备好如下相关电子文件档，如不了解，请联系客服电话：{{
            config.p_phone
          }}
        </div>
      </div>
      <div class="auth-content">
        <a-steps :current="0">
          <a-step
            v-for="item in [
              '材料准备',
              '材料信息上传',
              '基本信息填写',
              '完成待审核',
              '认证成功'
            ]"
            :key="item"
            :title="item"
          />
        </a-steps>

        <div class="documents-wrapper">
          <div class="document-item">1. 营业执照或律师执照照片</div>
          <div class="document-item">2. 法人身份证照片</div>
          <div class="document-item">3. 被授权委托人身份证照片</div>
          <div class="document-item">4. 《被授权委托人授权书》</div>
          <div class="document-item">5. 《会员协议书》</div>
          <div class="document-item">6. 会员费交款凭证照片</div>
          <div class="document-item">
            <a :href="'https://admin.xmzhuchen.com/' + config.p_user_zip"
              >4项、5项模板下载</a
            >
          </div>
        </div>

        <div class="next-wrapper">
          <a-button
            htmlType="submit"
            type="primary"
            size="large"
            @click="$router.push('/user/auth/step2')"
          >
            准备好了下一步
          </a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import storage from "@/utils/storage";

export default {
  data() {
    return {
      disabled: false
    };
  },
  computed: {
    ...mapGetters(["account"])
  },
  mounted() {
    if (this.account.status !== 1) {
      storage.setItem("USER_AUTH_STEP2", this.account);
      storage.setItem("USER_AUTH_STEP3", this.account);
    }
  }
};
</script>

<style lang="less" scoped>
.user-auth {
  .auth-title {
    padding-left: 30px;
    margin-bottom: 30px;

    .title {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid @border-color;
      color: @primary-color;
      padding-bottom: 4px;
    }

    .desc {
      padding-top: 8px;
      font-size: 16px;
      color: @text-color-2;
    }
  }

  .auth-content {
    width: 720px;
    padding: 10px 0;
    margin: 0 auto;

    .documents-wrapper {
      margin: 40px 0 0;

      .document-item {
        font-size: 16px;
        width: 240px;
        margin: 0 auto 16px;
        text-align: left;

        a {
          text-decoration: underline;
        }
      }
    }

    .next-wrapper {
      width: 240px;
      margin: 30px auto 12px;
      text-align: left;
    }
  }
}
</style>
